<template>
	<xform label-width="100px" ref="form" :options="options" @before-remove="beforeRemove" @on-exceed="handleExceed">
		<template #default>
			<el-button type="primary">点击上传</el-button>
		</template>
		<template #tip>
			<div style="color: #ccc;font-size: 12px; margin-left: 10px;">jpg/png less than 500kb</div>
		</template>

		<template #action="scope">
			<el-button type="primary" @click="submitForm(scope)">提交</el-button>
			<el-button @click="resetForm">重置</el-button>
		</template>
	</xform>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue'
	import xform from '@/components/library/xform.vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	let beforeRemove = val => {
		return ElMessageBox.confirm(`是否移除 ${val.file.name} ?`)
	}

	let handleExceed = val => {
		ElMessage.warning('最多只能上传三张图片')
	}

	let submitForm = scope => {
		scope.form.validate(valid => {
			if (valid) {
				ElMessage.success('提交成功')
			} else {
				ElMessage.error('表单填写有误')
			}
		})
	}

	let form = ref()

	let resetForm = () => {
		form.value.resetFields()
	}

	let options = [{
		type: 'input',
		value: '',
		label: '用户名',
		prop: 'username',
		placeholder: '请输入用户名',
		rules: [{
			required: true,
			message: '请输入用户名',
			trigger: 'blur'
		}, {
			min: 2,
			max: 6,
			message: '用户名在2-6位之间',
			trigger: 'blur'
		}],
		attrs: {
			clearable: true,
		}
	}, {
		type: 'input',
		value: '',
		label: '密码',
		prop: 'password',
		placeholder: '请输入密码',
		rules: [{
			required: true,
			message: '请输入密码',
			trigger: 'blur'
		}, {
			min: 6,
			max: 15,
			message: '密码在6-15位之间',
			trigger: 'blur'
		}],
		attrs: {
			showPassword: true,
			clearable: true
		}
	}, {
		type: 'select',
		value: '',
		placeholder: '请选择职位',
		prop: 'role',
		label: '职位',
		rules: [{
			required: true,
			message: '职位不能为空',
			trigger: 'blur',
		}],
		children: [{
				type: 'option',
				label: '经理',
				value: '1'
			},
			{
				type: 'option',
				label: '主管',
				value: '2'
			},
			{
				type: 'option',
				label: '员工',
				value: '3'
			}
		]
	}, {
		type: 'checkbox-group',
		value: [],
		prop: 'like',
		label: '爱好',
		rules: [{
			required: true,
			message: '爱好不能为空',
			trigger: 'blur'
		}],
		children: [{
				type: 'checkbox',
				label: '足球',
				value: '1'
			},
			{
				type: 'checkbox',
				label: '篮球',
				value: '2'
			},
			{
				type: 'checkbox',
				label: '排球',
				value: '3'
			}
		]
	}, {
		type: 'radio-group',
		value: '',
		prop: 'gender',
		label: '性别',
		rules: [{
			required: true,
			message: '性别不能为空',
			trigger: 'change'
		}],
		children: [{
				type: 'radio',
				label: '男',
				value: 'male'
			},
			{
				type: 'radio',
				label: '女',
				value: 'female'
			},
			{
				type: 'radio',
				label: '保密',
				value: 'not'
			}
		]
	}, {
		type: 'upload',
		label: '上传',
		prop: 'pic',
		uploadAttrs: {
			action: 'https://jsonplaceholder.typicode.com/posts/',
			multiple: true,
			limit: 3
		},
	}, {
		type: 'editor',
		value: '',
		prop: 'desc',
		label: '描述',
		placeholder: '请输入描述',
		rules: [{
			required: true,
			message: '描述不能为空',
			trigger: 'blur'
		}]
	}]
</script>

<style scoped>

</style>
